<template>
	<view class="login" :class="vi_pageSize">
		<view class="banner">
			<view class="fbox">
				<view class="circular c1 fbox">
					<view class="circular c2 fbox">
						<view class="circular c3"></view>
					</view>
				</view>
			</view>
			<p class="title fontSize-xl">工作站</p>
		</view>
		<view class="image"></view>
		<view class="form fbox V x-full">
			<view class="item fbox H x-left">
				<text class="iconfont icon-user fontSize-x3l mr-sm"></text>
				<input v-model="username" placeholder="手机号/用户名" type="text">
			</view>
			<view class="item fbox H x-left">
				<text class="iconfont icon-password fontSize-x3l mr-sm"></text>
				<input v-model="password" placeholder="登录密码" type="password">
			</view>
			<view class="btn">
				<button @click="login">{{loginText}}</button>
			</view>
			<text class="forget fontSize-sm mt-md mr-sm text-right">忘记密码？</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noCache: true, //当前页面不刷新缓存，因为登录前无数据
				username: "pt123",
				password: "123456",
				isLoging: {//登录锁
					value:false
				}, 
			}
		},
		computed:{
			loginText:function(){
				return this.isLoging.value? "登录中...":"登 录"
			}
		},
		methods: {
			login() {
				this.$http.nquest({
					url:"login",
					data: {
						account: this.username,
						password: this.password,
						personType: 2
					},
				}, this.isLoging).then((resData)=>{
					let data = resData.data;
					if (data.isLogin) {
						//登录，获得数据写入缓存
						let _this = this;
						this.$store.dispatch('user/setData', {
							data: {
								userInfo: {
									id: data.currentUnitOrgId,
									name: data.currentUserName,
									orgName: data.currentUserOrgName,
								},
								token: data.token,
							},
						}).then(() => { //登录写缓存成功
							this.$api.msg("登录成功");
							//跳转首页
							setTimeout(() => {
								this.$api.linkTo("/pages/patientList/patientList","forward");
							}, 2000);
						}, () => { //登录写缓存失败,清除数据
							this.$store.dispatch('user/clearData');
						});
					} else {
						if(resData.msg){
							this.$api.msg(resData.msg);
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.login {
	.banner {
		padding-top: 3em;
		background: linear-gradient(-90deg, #378de8, #2882e6);
		.circular{
			border-radius: 50%;
			&.c1{
				width: 7em;
				height: 7em;
				background: rgba(255, 255, 255, 0.05);
			}
			&.c2{
				width: 5.6em;
				height: 5.6em;
				background: rgba(255, 255, 255, 0.1);
			}
			&.c3{
				width: 5em;
				height: 5em;
				background: rgba(255, 255, 255, 0.2);
			}
		}
		.title {
			color: rgba(225, 255, 255, 0.8);
			padding: 1em 0 0.5em;
			text-align: center;
		}
	}
	.image {
		height: 4em;
		background: url("../../static/images/login.png");
		background-size: 100% 100%;
	}
	.form{
		width: 70%;
		min-width: 260px;
		margin: auto;
		padding-top: 1em;
		.item {
			padding: 1em 1em 0.75em;
			margin-bottom: 0.25em;
			border-bottom: 1px solid #e5e5e5;
			.iconfont{
				color: #2374d0;
			}
			input{
				flex-grow: 1;
				color: $uni-text-color-grey;
			}
		}
		.btn{
			margin-top: 2.5em;
			button {
				height: 2.5em;
				border-radius: 1.25em;
				background: linear-gradient(-106deg, #00a9c0, #7bddfd);
				color: $uni-text-color-inverse;
			}
		}
		.forget {
			color: $uni-text-color-grey;
		}
	}
}
</style>
